<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '关于我们',
  },
}
</route>

<template>
  <div class="about-page">
    <div class="modlus app">
      <div class="logo"></div>
      <div class="name">小程序名称</div>
    </div>
    <div class="modlus list">
      <div class="item active" @click="to(`/pages-sub/system/agreement?type=user_service`)">
        <div class="title">用户服务协议</div>
        <div class="right">
          <div class="icon i-carbon-chevron-right"></div>
        </div>
      </div>
      <div class="item active" @click="to(`/pages-sub/system/agreement?type=user_privacy`)">
        <div class="title">隐私保护政策</div>
        <div class="right">
          <div class="icon i-carbon-chevron-right"></div>
        </div>
      </div>
      <div class="item active">
        <div class="title">投诉咨询</div>
        <div class="right">
          138****88888
          <div class="icon i-carbon-chevron-right"></div>
        </div>
      </div>
      <div class="item active">
        <div class="title">分享给好友</div>
        <div class="right">
          <div class="icon i-carbon-chevron-right"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { to } from '@/utils/page'
</script>

<style lang="scss" scoped>
.about-page {
  box-sizing: border-box;
  min-height: 100vh;
  padding: 30rpx;
  background-color: var(--bgc4);

  .modlus {
    margin-bottom: 26rpx;
    background: #ffffff;
    border-radius: 30rpx;
  }
  .app {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 384rpx;
    .logo {
      width: 154rpx;
      height: 154rpx;
      background: var(--color1);
      border-radius: 38rpx;
      box-shadow: 0px 17rpx 28rpx rgba(#1f2026, 0.3);
    }
    .name {
      margin-top: 40rpx;
      font-size: 35rpx;
      font-weight: 600;
    }
  }

  .list {
    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 112rpx;
      padding: 0 24rpx;
      .title {
        font-size: 30rpx;
        color: var(--color1);
      }

      .right {
        display: flex;
        align-items: center;
        font-size: 27rpx;
        color: var(--color4);
        .icon {
          margin-left: 16rpx;
          font-size: 30rpx;
          color: var(--color5);
        }
      }
    }
  }
}
</style>
